<template>
    <div class="main-title">
        <h1>{{data.field_name}}</h1>
        <!-- <router-link :to=" {path: '/list', query: { field: data.field}}">
          <span>更多课程 <i class="iconfont icon-arrow-right"></i></span>
        </router-link> -->
        <div class="link-wrap" @click="onRouteTo(data.field)">
            <span>更多课程 <i class="iconfont icon-arrow-right"></i></span>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
    name: 'MainTitle',
    props: {
        data: Object
    },

    methods: {
        ...mapMutations(['selectField']),
        onRouteTo (field) {
            this.selectField(field);
            this.$router.push('./list')
        },
    }
}
</script>

<style lang="scss" scoped>
  .main-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: .44rem;
      padding: 0 .1rem;
      box-sizing: border-box;
      line-height: .44rem;

      h1 {
          font-size: .16rem;
      }

      .link-wrap {
          margin-top: -.05rem;
      }

      span {
          font-size: .12rem;
          color: #999;

          .iconfont {
              font-size: .1rem;
          }
      }
  }
</style>